


import React, { FC , useEffect, useRef, useState  } from 'react'
import './index.scss'
import Img from '@/assets/images/404.png'
import { useNavigate } from 'react-router-dom'
import { SpanFace } from '../../utils/types'



const NotFound:FC = () => {
    const bgstar:any  = useRef()
    const router = useNavigate()
    const [count,setCount] = useState<number>(5)
    const [spanList,setSpanList] = useState<Array<SpanFace>>([])
    let timer:any = null;

    const countDown = ()=>{
        timer = setInterval(()=>{
            if(count>0){
                setCount(count-1)
            }else{
                clearInterval(timer)
                timer = null;
                setCount(5)
                // router('/guide')
            }
        },1000)
    }


    useEffect(()=>{
        countDown()

        return ()=>{
            clearInterval(timer)
            timer = null;
        }
    },[count])

    const getSpanListInit = ()=>{
        const width = bgstar.current.clientWidth 
        const height  = bgstar.current.clientHeight  
       
        
        
        for(var i=0;i<520;i++){
            var left = Math.random() * width ;
            var top = Math.random() * height ;

            var scale = Math.random() * 1.2
            var rate = Math.random() * 1.5 
            var r = Math.random() * 255;
            var g = Math.random() * 255;
            var b = Math.random() * 255;
            var opacity = Math.random() 

            spanList.push({
                left:left+'px',
                top:top+'px',
                animationDelay:rate+'s',
                transform:`scale(${scale})`,
                backgroundColor:`rgba(${r},${g},${b},${opacity})`
            })
        }

        setSpanList([...spanList])
    }
    
    useEffect(()=>{
        getSpanListInit()
    },[])

    return (
        <div className='errorpage' id="bgstar" ref={bgstar} >
            <div className="down" onClick={()=>router('/guide')}>
                {count}S 剩余
            </div>
            <img src={Img}  className='myimg' alt="" />

            {
                spanList.map((item,index)=>{
                    return (
                        <span key={index} className='spandot' style={item} ></span>
                    )
                })
            }
        </div>
    )
}

export default NotFound
